﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WIFI定位平台</title>
	<style type="text/css">
	body{
	background-image:url(__PUBLIC__/images/bg3.jpg);
	background-repeat:no-repeat;
	background-position:0px 0px;   //100px 230px
	background-attachment:scroll;
	}
	</style>
    <!--link href="__PUBLIC__/FrontEnd/css/style.css" type="text/css" rel="stylesheet"-->
    <script>
        function a1(){
            history.go(0) ;
        }
        setInterval('a1()',60000);
    </script>
</head>
    <body>
        <script src="__PUBLIC__/FrontEnd/js/d3.min.js" charset="utf-8"></script>
		<p align="right" style="margin-right: 10px">
			<a href="{:U('User/exitLogin')}">注销</a>
		</p>

			<br/>
			<h1 align="center">
				WIFI定位平台
			</h1>
		<!--form>
		x_0=<input id="x_0" type="text" value="900" size="3"/>
		y_0=<input id="y_0" type="text" value="1600" size="3"/>
		d=<input id="d" type="text" value="800" size="3"/>
		x_3=<input id="x_3" type="text" value="1200" size="3"/>
		y_3=<input id="y_3" type="text" value="1000" size="3"/>
		r1=<input id="r1" type="text" value="330" size="3"/>
		r2=<input id="r2" type="text" value="480" size="3"/>
		r3=<input id="r3" type="text" value="460" size="3"/>
		z=<input id="z" type="text" value="0" size="3"/>
		<br/>
		</form-->
				
		<script>
		
 
		var x_0 = 900, y_0 = 1600;     //定义起始位置（x_1 , y_1）
		var x_1 = x_0, y_1 = y_0;
		var d = 800, x_2 = x_0 + d, y_2=y_0;
		var x_3 = 1200, y_3 = 1000 ;
		var r1 = 330, r2=480, r3=460, z=0 ;
		var i = x_3 - x_0, j = y_3 - y_0;


{
	/*
		var x_0=parseInt(document.getElementById("x_0").value);
		var y_0=parseInt(document.getElementById("y_0").value);
		var d=parseInt(document.getElementById("d").value);
		var x_3=parseInt(document.getElementById("x_3").value);
		var y_3=parseInt(document.getElementById("y_3").value); */
	//	var r1=parseInt(document.getElementById("r1").value);
	
	/*
	if ("{$v.devicebyname}"=="compute")
	{	
		var r1=Math.abs({$v.devicestate});
	}
	else 
	var r1=parseInt(document.getElementById("r1").value);
	*/	
	//	var r2=parseInt(document.getElementById("r2").value);
	//	var r3=parseInt(document.getElementById("r3").value);
	//	var z=parseInt(document.getElementById("z").value);
		
		var x_1 = x_0, y_1 = y_0;
		var  x_2 = x_0 + d, y_2=y_0;
		var i = x_3 - x_0, j = y_3 - y_0;
		//定义容器
		var svg= d3.select("body").append("svg")
			.attr("width",800*3)
			.attr("height",800*3);
		
		//画个黑色的圆心，圆心x_1,y_1
		svg.append("circle").attr("cx", x_1)
			.attr("cy", y_1).attr("r", 3);

		svg.append("text")  
			.attr("dx", x_1+3)  
			.attr("dy", y_1-3)  
			.text("AP1");
		//画个黑色的方框，x_1,y_1 ，将覆盖上面的圆心 x_1,y_1
		svg.append("rect")  
			.attr("x", x_1-4)  
			.attr("y", y_1-4)  
			.attr("width", 8) 
			.attr("height", 8) 
			.style("fill", "#f0f");

		/*尝试绘制三角形，但是只能用数字表示点，还需尝试
		svg.append('polygon').attr({
			points: "145,155 150,150 155,155"
		}).style({
			fill: 'none', 
			stroke: '#f0f',
			'stroke-width': 4
		});
		*/

		//画个黑色的圆心，圆心x_2,y_2
		svg.append("circle").attr("cx", x_2)
			.attr("cy", y_2).attr("r", 3);
		
		svg.append("text")  
			.attr("dx", x_2+3)  
			.attr("dy", y_2-3)  
			.text("AP2");
		//画个黑色的方框，x_2,y_2 ，将覆盖上面的圆心x_2,y_2
		svg.append("rect")  
			.attr("x", x_2-4)  
			.attr("y", y_2-4)  
			.attr("width", 8) 
			.attr("height", 8)
			.style("fill", "#f0f");
				
		//画个黑色的圆心，圆心x_3,y_3
		svg.append("circle").attr("cx", x_3)
			.attr("cy", y_3).attr("r", 3);
		
		svg.append("text")  
			.attr("dx", x_3+3)  
			.attr("dy", y_3-3)  
			.text("AP3");
		//画个黑色的方框，x_3,y_3 ，将覆盖上面的圆心x_3,y_3
		svg.append("rect")  
			.attr("x", x_3-4)  
			.attr("y", y_3-4)  
			.attr("width", 8) 
			.attr("height", 8)
			.style("fill", "#f0f");
}		


		</script> 
		
		<foreach name="info" item="v">

<script>
{		
		/*
		计算公式：
			d = 10^((abs(RSSI) - A) / (10 * n))

		其中：
			d - 计算所得距离
			RSSI - 接收信号强度（负值）
			A - 发射端和接收端相隔1米时的信号强度
			n - 环境衰减因子
		*/
		var A=50, n=2.5;
		var k=800/4;         //比例尺   地图像素除以实际的长度，例如800像素除以4米；
		var power=(Math.abs({$v.devicestate})-A)/(10*n);
		var r1=k*Math.pow(10,power);

		var power=(Math.abs({$v.rssi2})-A)/(10*n);
		var r2=k*Math.pow(10,power);
		
		var power=(Math.abs({$v.rssi3})-A)/(10*n);
		var r3=k*Math.pow(10,power);



 //计算r1-r2 两个相交点  ,  当y_2=y_1时  
		var x1 = (Math.pow(r1, 2) - Math.pow(r2, 2) + Math.pow(d, 2)) / (2 * d) ;
		var xa1=x1+x_0;
		var xa2=xa1;

		var y11=  Math.sqrt(Math.pow(r1, 2) - Math.pow(x1, 2) - Math.pow(z, 2));
		var y12=  -y11;
	
		var ya1 = y11+y_0 ;
		var ya2 = y12+y_0;
		if(Math.pow((x1-i), 2)+Math.pow((y11-j), 2)+Math.pow(z, 2)<=Math.pow(r3, 2))
		{
			xa=x1+x_0;
			ya=y11+y_0;
		}
		else
		{
			xa=x1+x_0;
			ya=-y11+y_0;
		}

	
		
  //计算r1-r3两个相交点   	(方法有误)
/*	
		var a=1;
		var b=-1;
		var c=((Math.pow(i, 2) + Math.pow(j, 2) + (1-2*i)*Math.pow(r1, 2)-Math.pow(r3,2)+2*i*Math.pow(z,2))/(2*i));
		
		var y21=(-b-Math.pow(b*b-4*a*c,0.5))/(2*a);
		var y22=(-b+Math.pow(b*b-4*a*c,0.5))/(2*a);		
		
		var yb1=y21+y_0;
		var yb2=y22+y_0;

		var x21=(Math.pow(i, 2) + Math.pow(j, 2) + Math.pow(r1, 2)-Math.pow(r3,2)-2*y21*j)/(2*i) ;
		var x22=(Math.pow(i, 2) + Math.pow(j, 2) + Math.pow(r1, 2)-Math.pow(r3,2)-2*y22*j)/(2*i) ;
		
		var xb1=x21+x_0;
		var xb2=-x22+x_0;		
*/

  //计算r1-r3两个相交点
  if(x_1!=x_3)      //当x_3！=x_1时
  {
		var k=((Math.pow(r1, 2) - Math.pow(r3, 2) + Math.pow(i, 2)+Math.pow(j,2))/(2*i));
		var l=j/i;
		var a=1+Math.pow(l, 2);
		var b=-2*k*l;
		var c=Math.pow(k, 2) + Math.pow(z, 2) -Math.pow(r1,2);
		
		var y21=(-b-Math.pow(b*b-4*a*c,0.5))/(2*a);
		var y22=(-b+Math.pow(b*b-4*a*c,0.5))/(2*a);
				
		var yb1=y21+y_0;
		var yb2=y22+y_0;

		var x21=(Math.pow(i, 2) + Math.pow(j, 2) + Math.pow(r1, 2)-Math.pow(r3,2)-2*y21*j)/(2*i) ;
		var x22=(Math.pow(i, 2) + Math.pow(j, 2) + Math.pow(r1, 2)-Math.pow(r3,2)-2*y22*j)/(2*i) ;
		
		var xb1=x21+x_0;
		var xb2=x22+x_0;

		if(Math.pow((x21-d), 2)+Math.pow(y21, 2)+Math.pow(z, 2)<=Math.pow(r2, 2))
		{
			xb=x21+x_0;
			yb=y21+y_0;
		}
		else
		{
			xb=x22+x_0;
			yb=y22+y_0;
		}
  }
  else    //当x_3=x_1时 
  {				
		var y21=(Math.pow(r1, 2) - Math.pow(r3, 2) + Math.pow(j, 2)) / (2 * j) ;
		var y22=y21;
		
		var yb1=y21+y_0;
		var yb2=y21+y_0;

		var x21=Math.sqrt(Math.pow(r1, 2) - Math.pow(y21, 2) - Math.pow(z, 2));
		var x22=-x21;
		var xb1=x21+x_0;
		var xb2=x22+x_0;

		if(Math.pow((x21-d), 2)+Math.pow(y21, 2)+Math.pow(z, 2)<=Math.pow(r2, 2))
		{
			xb=x21+x_0;
			yb=y21+y_0;
		}
		else
		{
			xb=x22+x_0;
			yb=y22+y_0;
		}
  }


 //计算r2-r3两个相交点   	
 if(x_2!=x_3)      //当x_3！=x_2时   --还需要修改
  {
		var k = ((Math.pow(r2, 2) - Math.pow(r3, 2) - Math.pow(d, 2) + Math.pow(i, 2) + Math.pow(j,2))/(2*j));
		var l = (d-i)/j;
		var a = 1+Math.pow(l, 2);
		var b = 2*k*l-2*d;
		var c = Math.pow(d, 2) + Math.pow(k, 2) + Math.pow(z, 2) -Math.pow(r2,2);
		
		var x31=(-b-Math.pow(b*b-4*a*c,0.5))/(2*a);
		var x32=(-b+Math.pow(b*b-4*a*c,0.5))/(2*a);
				
		var xc1=x31+x_0;
		var xc2=x32+x_0;

		var y31=k+l*x31 ;
		var y32=k+l*x32 ;
		
		var yc1=y31+y_0;
		var yc2=y32+y_0;

		if(Math.pow(x31, 2)+Math.pow(y31, 2)+Math.pow(z, 2)<=Math.pow(r1, 2))
		{
			xc=x31+x_0;
			yc=y31+y_0;
		}
		else
		{
			xc=x32+x_0;
			yc=y32+y_0;
		}
  }
  else    //当x_3=x_2时 
  {				
		var y31=(Math.pow(r2, 2) - Math.pow(r3, 2) + Math.pow(j, 2)) / (2 * j) ;
		var y32=y31;
		
		var yc1=y31+y_0;
		var yc2=y31+y_0;

		var a=1;
		var b=-2*d;
		var c= Math.pow(d, 2) + Math.pow(y31, 2)+ Math.pow(z, 2) -Math.pow(r2,2);
		
		var x31=(-b-Math.pow(b*b-4*a*c,0.5))/(2*a);
		var x32=(-b+Math.pow(b*b-4*a*c,0.5))/(2*a);

		var xc1=x31+x_0;
		var xc2=x32+x_0;

		if(Math.pow(x31, 2)+Math.pow(y31, 2)+Math.pow(z, 2)<=Math.pow(r1, 2))
		{
			xc=x31+x_0;
			yc=y31+y_0;
		}
		else
		{
			xc=x32+x_0;
			yc=y32+y_0;
		}
  }

		
		var obj_x=(xa+xb+xc)/3;
		var obj_y=(ya+yb+yc)/3;

		document.write('<p>'+'三边测量定位算法'+'<p>');
		document.write('r1='+r1+'  ;  '+'r2='+r2+'  ;  '+'r3='+r3);
		document.write('<p>');
		document.write('obj_x='+obj_x);
		document.write('  ;  ');
		document.write('obj_y='+obj_y);
		
		//显示r1-r2相交的两点坐标 a1:（xa1,ya1） ,a2:（xa2,ya2）
		document.write('<p>');
		document.write('xa1='+xa1);
		document.write('  ;  ');
		document.write('ya1='+ya1);

		document.write('<p>');
		document.write("<b>"+'xa='+xa+"</b>");
		document.write('  ;  ');
		document.write("<b>"+'ya='+ya+"</b>");
	//	document.write('<p>')
	//	document.write('xa2='+xa2);
	//	document.write('  ;  ')
	//	document.write('ya2='+ya2);

		//显示r1-r3相交的两点坐标  b1：（xb1,yb1） ,b2：（xb2,yb2）
		document.write('<p>')
		document.write('xb1='+xb1);
		document.write('  ;  ');
		document.write('yb1='+yb1);

		document.write('<p>');
		document.write("<b>"+'xb='+xb+"</b>");
		document.write('  ;  ');
		document.write("<b>"+'yb='+yb+"</b>");
	//	document.write('<p>')
	//	document.write('xb2='+xb2);
	//	document.write('  ;  ')
	//	document.write('yb2='+yb2);
		
		//显示r2-r3相交的两点坐标  c1：（xc1,yc1） ,c2：（xc2,yc2）
		document.write('<p>');
		document.write('xc1='+xc1);
		document.write('  ;  ');
		document.write('yc1='+yc1);
				
		document.write('<p>');
		document.write("<b>"+'xc='+xc+"</b>");
		document.write('  ;  ');
		document.write("<b>"+'yc='+yc+"</b>");
	//	document.write('<p>')
	//	document.write('xc2='+xc2);
	//	document.write('  ;  ')
	//	document.write('yc2='+yc2);		

/*   测试画个黑色的圆形

		//定义容器
		var svgContainer = d3.select("body").append("svg")
			.attr("width",200)
			.attr("height",200);
 
        //测试画圆形
		var circle = svgContainer.append("circle")
			.attr("cx",30)
			.attr("cy",30)
			.attr("r",20);

*/
	
		/*
		//定义容器
		var svg= d3.select("body").append("svg")
			.attr("width",800)
			.attr("height",800);
		
		//画个蓝色的圆形，圆心x_1,y_1，半径r1
		svg.append("circle").attr("cx", x_1)
			.attr("cy", y_1).attr("r", r1)
			.style("fill", "blue").style("opacity", 0.3);

		//画个白色的圆心，圆心x_1,y_1
		svg.append("circle").attr("cx", x_1)
			.attr("cy", y_1).attr("r", 3)
			.style("fill", "white");

		//画个红色的圆形，圆心x_2,y_2，半径r2
		svg.append("circle").attr("cx", x_2)
			.attr("cy", y_2).attr("r", r2)
			.style("fill", "red").style("opacity", 0.4);

		//画个白色的圆心，圆心x_2,y_2
		svg.append("circle").attr("cx", x_2)
			.attr("cy", y_2).attr("r", 3)
			.style("fill", "white");
		
		//画个黄色的圆形，圆心x_3,y_3，半径r3
		svg.append("circle").attr("cx", x_3)
			.attr("cy", y_3).style("opacity", 0.5)
			.attr("r", r3).style("fill", "yellow");

		//画个白色的圆心，圆心x_3,y_3
		svg.append("circle").attr("cx", x_3)
			.attr("cy", y_3).attr("r", 3)
			.style("fill", "white");

		//画两个黑色的圆心，圆心（xa1,ya1）,(xa2,ya2)
		svg.append("circle").attr("cx", xa1)
			.attr("cy", ya1).attr("r", 3);

	//	svg.append("circle").attr("cx", xa2)
	//		.attr("cy", ya2).attr("r", 3);
		
		//画两个绿色的圆心，圆心（xb1,yb1）,(yb2,yb2)
		svg.append("circle").attr("cx", xb1)
			.attr("cy", yb1).attr("r", 3)
			.style("fill", "green");

	//	svg.append("circle").attr("cx", xb2)
	//		.attr("cy", yb2).attr("r", 3)
	//		.style("fill", "green");

		//画两个红色的圆心，圆心（xb1,yb1）,(yb2,yb2)
		svg.append("circle").attr("cx", xc1)
			.attr("cy", yc1).attr("r", 3)
			.style("fill", "red");

	//	svg.append("circle").attr("cx", xc2)
	//		.attr("cy", yc2).attr("r", 3)
	//		.style("fill", "red");

		//画个白色的圆心，圆心obj_x,obj_y
	*/
		svg.append("circle").attr("cx", obj_x)
			.attr("cy", obj_y).attr("r", 3)
			.style("fill", "red");

		if("{$v.devicebyname}"!="")
		{
		svg.append("text")  
			.attr("dx", obj_x)  
			.attr("dy", obj_y)  
			.text("{$v.devicebyname}");
		}
		else
		{
		svg.append("text")  
			.attr("dx", obj_x)  
			.attr("dy", obj_y)  
			.text("{$v.chipid}");
		}
}

 
</script>

</foreach>
       


    </body>
</html>
